<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>商城首页</h1>
        <input type="text" id="search" placeholder="搜索商品..." />
    </header>

    <main>
        <div id="products"></div>
    </main>
    <script>
        // 传统开发：使用ES6类管理商城逻辑
        class ShoppingMall {
        constructor() {
            this.products = [
            { id: 1, name: 'iPhone 15', price: 5999, stock: 10 },
            { id: 2, name: 'MacBook Pro', price: 12999, stock: 5 }
            ];
            this.cart = [];
            this.searchKeyword = '';
            
            // 手动绑定DOM事件
            this.bindEvents();
            this.render();
        }
        
        bindEvents() {
            // 搜索功能
            document.getElementById('search').addEventListener('input', (e) => {
            this.searchKeyword = e.target.value;
            this.render(); // 手动重新渲染
            });
            
            // 添加到购物车
            document.addEventListener('click', (e) => {
            if (e.target.classList.contains('add-btn')) {
                const productId = parseInt(e.target.getAttribute('productId'));
                this.addToCart(productId);
            }
            });
        }
        
        addToCart(productId) {
            const product = this.products.find(p => p.id === productId);
            if (product && product.stock > 0) {
            product.stock--;
            this.cart.push(product);
            this.render(); // 手动重新渲染
            }
        }
        
        render() {
            // 手动操作DOM进行渲染
            const container = document.getElementById('products');
            const filteredProducts = !this.searchKeyword ? this.products :this.products.filter(product => 
                product.name.includes(this.searchKeyword)
                );
            
            container.innerHTML = filteredProducts.map(product => `
            <div class="product-card">
                <h3>${product.name}</h3>
                <p class="price">￥${product.price}</p>
                <p class="stock">${product.stock > 0 ? `库存：${product.stock}` : '缺货'}</p>
                <button class="add-btn" productId="${product.id}" 
                        ${product.stock === 0 ? 'disabled' : ''}>
                ${product.stock > 0 ? '加入购物车' : '缺货'}
                </button>
            </div>
            `).join('');
        }
        }

        // 使用传统方式
        const mall = new ShoppingMall(

        );
    </script>
</body>
</html>